<template>
	<view style="display: flex;flex-direction: column;height: 100%;">
		<view class="Data_tab">
			<view class="item" v-for="(item, index) in Data_tab" :key="index" :class="{ item1: Data_tab_index == index }" @tap="Datatab(index)">{{ item }}</view>
		</view>
		<view class="top_btn">
			<view class="btn" @tap="StopNow(0)">{{$t("yjkq")}}</view>
			<view class="btn" @tap="StopNow(9)">{{$t("yjqk")}}</view>
			<view class="btn btn2" @tap="OneShow">
				<u-icon :name="Console_value?'yanjing':'yanjingbiyan'" custom-prefix="custom-icon" size="28" style="margin-right:10rpx;"></u-icon>
				<text>{{$t("ywc")}}</text>
			</view>
		</view>
		<view class="cell">
			<view id="cell" style="flex: 1;overflow: auto;">
				<mescroll-uni :fixed="false" :scrollTop="scrollTop" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view
						class="cell_list"
						@tap="cell_switch(index,item.executeStatus,item)"
						:class="{ cell_list_active: cell_list_index == index, cell_list_active2: cell_list_index == index && item.executeStatus == 5 }"
						v-for="(item, index) in pageData"
						:key="index"
					>
						<view class="cell_item_top">
							<view class="left">
								<u-icon name="you" custom-prefix="custom-icon" size="20"></u-icon>
								<view class="text">
									<!-- {{ index }} -->
									{{ item.exchangeCoin }}
									<text class="text_tips">/USDT</text>
								</view>
								<view class="tips" v-if="item.executeStatus == 2"><text class="text">{{$t("zxz")}}</text></view>
								<view class="tips tips3" v-else-if="item.executeStatus == 5"><text class="text">{{$t("ywc")}}</text></view>
								<view class="tips tips2" v-else><text class="text">{{$t("zanting")}}</text></view>
							</view>
							<view class="right">
								<view class="label">{{$t("dqjg")}}</view>
								<text class="text">{{ item.price }}</text>
							</view>
							<view class="right">
								<view class="label">{{$t("sxsy")}}</view>
								<text class="text2" :class="{ text3: item.tacticsDetail.realizedType }">{{ item.realizedReward }}U</text>
							</view>
							<view class="right_active">{{$t("zdycl")}}</view>
						</view>
						<view class="cell_item_list">
							<view class="item">
								<view class="label">
									{{$t("sxsy")}}
									<text class="text_tips">(U)</text>
								</view>
								<view class="text" :class="{ text3: item.tacticsDetail.realizedType }">{{ item.tacticsDetail.realizedReward }}U</view>
							</view>
							<view class="item">
								<view class="label">
									{{$t("ccsl")}}
									<text class="text_tips">({{ item.tacticsDetail.amointUnit }})</text>
								</view>
								<view class="text">{{ item.tacticsDetail.keepAmount }}U</view>
							</view>
							<view class="item">
								<view class="label">
									{{$t("ccje")}}
									<text class="text_tips">(U)</text>
								</view>
								<view class="text text4">{{ item.tacticsDetail.keepMoney }}U</view>
							</view>
						</view>
						<view class="cell_item_list">
							<view class="item">
								<view class="label">{{$t("ccjj")}}</view>
								<view class="text text3">{{ item.tacticsDetail.avgPrice }}</view>
							</view>
							<view class="item">
								<view class="label">{{$t("zf")}}</view>
								<view class="text" :class="{ text3: item.tacticsDetail.interestType }">{{ item.tacticsDetail.interestRate }}</view>
							</view>
							<view class="item">
								<view class="label">{{$t("dqjg")}}</view>
								<view class="text">{{ item.tacticsDetail.price }}</view>
							</view>
						</view>
						<view class="cell_item_list">
							<view class="item">
								<view class="label">{{$t("bccs")}}</view>
								<view class="text text4">{{ item.tacticsDetail.patchTimes }}</view>
							</view>
							<view class="item">
								<view class="label">{{$t("jhzd")}}</view>
								<view class="text text4">{{ item.tacticsDetail.planExecuteNum }}</view>
							</view>
							<view class="item">
								<view class="label">{{$t("zdcs")}}</view>
								<view class="text text4">{{ item.tacticsDetail.executeTimes }}</view>
							</view>
						</view>
						<view class="cell_item_Operation">
							<view class="cell_item_Operation_top">
								<view class="left">{{$t("dqzt")}}</view>
								<view class="right">
									<text v-if="item.tacticsDetail.executeStatus == 2">{{ item.tacticsDetail.tacticsType == 1 ? $t("yqddccl") : $t("yqdxhcl") }}</text>
									<text v-if="item.tacticsDetail.executeStatus == 1">{{ $t("dqd") }}</text>
									<text v-if="item.tacticsDetail.executeStatus == 30">{{ $t("apiyczt") }}</text>
									<text v-if="item.tacticsDetail.executeStatus == 5">{{ $t("ywc") }}</text>
									<text v-if="item.tacticsDetail.executeStatus == 3">{{ $t("usdtyebzzt") }}</text>
									<text v-if="item.tacticsDetail.executeStatus == 31">{{ $t("jysyebzzt") }}</text>
									<view v-if="item.tacticsDetail.executeStatus == 2" class="right_btn" @tap.stop="StopNow(5, item, 1)">{{$t("ljtz")}}</view>
									<view
										v-if="item.tacticsDetail.executeStatus != 2 && item.tacticsDetail.executeStatus != 5 && item.tacticsDetail.executeStatus != 30"
										class="right_btn"
										@tap.stop="StopNow(5, item, 2)"
									>
										{{$t("ljqd")}}
									</view>
									<view v-if="item.tacticsDetail.executeStatus == 30" class="right_btn" @tap.stop="StopNow(5, item, 1)">{{$t("ljjs")}}</view>
									<view
										v-if="item.tacticsDetail.executeStatus == 5"
										class="right_btn"
										@tap.stop="toPage(`/pages/Console/RobotSetting/Setupspot/Setupspot?id=${item.tacticsId}`)"
									>
										{{$t("gdsz")}}
									</view>
									<view class="right_btn" v-if="item.executeStatus == 30" @tap.stop="StopNow(5, item, 2)">{{$t("ljqd")}}</view>
								</view>
							</view>
							<view class="cell_item_Operation_btn" v-if="!(item.tacticsDetail.executeStatus == 5)">
								<view class="btn" @tap.stop="toPage(`/pages/Console/RobotSetting/Setupspot/Setupspot?id=${item.tacticsId}`)">{{$t("gdsz")}}</view>
								<view class="btn btn2" v-if="item.tacticsDetail.executeStatus != 5" @tap.stop="StopNow(2, item)">{{$t("yjmc")}}</view>
								<view class="btn btn3" v-if="item.tacticsDetail.executeStatus != 5" @tap.stop="StopNow(1, item)">{{$t("sdbc")}}</view>
								<view class="btn btn4" v-if="item.tacticsDetail.executeStatus != 5" @tap.stop="StopNow(3, item)">
									{{ item.tacticsDetail.tacticsType == 1 ? $t("clxh") : $t("gbxh") }}
								</view>
							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
			<view class="cell_Tre">
				<u-icon name="gengduo" custom-prefix="custom-icon" size="28" @tap="toPage(`/pages/Console/TradeRecord/TradeRecord?tacticsId=${tacticsId}`)"></u-icon>
				<text class="text" @tap="toPage(`/pages/Console/TradeRecord/TradeRecord?tacticsId=${tacticsId}`)">{{$t("jyjl")}}</text>
			</view>
		</view>
		<view class="cell_puls">
			<u-icon name="jia" @tap="toPage('/pages/Console/RobotSetting/RobotSetting')" custom-prefix="custom-icon" size="35"></u-icon>
			<text class="text" @tap="toPage('/pages/Console/RobotSetting/RobotSetting')">{{$t("tjjyd")}}</text>
		</view>
		<u-popup v-model="show" mode="center" class="popup" z-index="5">
			<view class="pop_nr">
				<image class="img" src="/static/user_bg.png"></image>
				<view class="pop_nr_block">
					<view class="title" v-if="type == 5">
						{{
							pageData_index.tacticsDetail.executeStatus == 30
								? $t("jsclh")
								: pageData_index.tacticsDetail.executeStatus == 2
								? $t("qrljtzcz")
								: $t("qrqdcz")
						}}
					</view>
					<view class="title" v-if="type == 2">{{$t("qrjymccz")}}</view>
					<view class="title" v-if="type == 1">{{$t("qrsdbccz")}}</view>
					<view class="pop_nr_item" v-if="type == 1">
						<view class="pop_nr_item_left">{{$t("bcjz")}}：</view>
						<input class="pop_nr_item_right" type="text" v-model="Amount" :placeholder="$t("qsrbcjz")" />
					</view>
					<view class="title" v-if="type == 3">
						<view class="pop_nr_item" v-if="pageData_index.tacticsDetail.tacticsType == 1" style="align-items: baseline;">
							<view class="pop_nr_item_left">{{$t("xhcs")}}：</view>
							<view style="text-align: left;">
								<input class="pop_nr_item_right" type="text" v-model="doAmount" :placeholder="$t("qsrxhcs")" />
								<!-- <text class="pop_nr_item_text" v-if="!doAmount">单次策略/循环策略</text>
								<text class="pop_nr_item_text" v-if="doAmount == 1">单次策略</text>
								<text class="pop_nr_item_text" v-if="doAmount > 1">循环策略</text> -->
							</view>
						</view>
						<view v-else>{{$t("qrgbxhcz")}}</view>
					</view>
					<view class="title" v-if="type == 0">{{$t("qryjqdsyclm")}}</view>
					<view class="title" v-if="type == 9">{{$t("bcqkg")}}<text v-if="checkClearProfit.profitType==0">{{$t("yingli")}}</text><text v-else>{{$t("kuisun")}}</text>{{'  '+checkClearProfit.profitTotal}},{{$t("sfqbqk")}}</view>
					<view class="pop_nr_btn">
						<view class="btn" @tap="OneStrategy"><text>{{$t("queren")}}</text></view>
						<view class="btn btn2" @tap="show = false"><text>{{$t("quxiao")}}</text></view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 支付密码输入弹窗 -->
		<tom-pwd v-if="showPwd" @cancel="showPwd = false" @confirm="confirm"></tom-pwd>
		<u-modal :title="$t('tishi')" :confirmText="$t('queding')" :cancelText="$t('quxiao')" v-model="show_modal">
			<view style="text-align: center;margin: 30rpx 30rpx;">{{ special_text }}</view>
		</u-modal>
		<u-toast ref="uToast" />
		<!-- liao -->
		<view class="scroll">
			<view class="scroll_item1"></view>
			<view class="scroll_item2"></view>
		</view>
		<!-- liao -->
	</view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			Data_tab: [this.$t("mdbt")],
			Data_tab_index: 0,
			cell_list_index: null,
			show: false,
			type: 0,
			pageData: [],
			pageData_index: {},
			id: null,
			showPwd: false,
			Amount: '',
			doAmount: '',
			special_text: '哈哈哈哈',
			show_modal: false,
			kg: '',
			tacticsId:'',
			checkClearProfit:{},
			Console_value: false,
			/*liao*/
			scrollTop:0,/*滚动条的位置*/
			cell_top:0,/*主容器*/
			cell_h:0,/*主容器height*/
			cell_list_show_h:0,/*选中容器显示的高度*/
			cell_list_active_h:0,/*选中容器的高度*/
			Shelter_h:0,/*选中容器别遮档的高度*/
			scroll_item1:0,/*其他单容器的高度*/
			scroll_item2:0,/*完成单容器的高度*/
			scroll_active:false,/*判断是否首次*/
			scroll_active_h:false,/*判断首次容器高度*/
			/*liao*/
		};
	},
	onHide() {
		this.show = false;
		this.show_modal = false;
		this.showPwd = false;
	},
	filters: {
		formStatus(val) {
			if (val == 1) return this.$t("dqd");
			if (val == 30) return this.$t("apiyczt");
			if (val == 5) return this.$t("ywc");
			if (val == 3) return this.$t("usdtyebzzt");
			if (val == 31) return this.$t("jysyebzzt");
		}
	},
	created() {
	},
	methods: {
		// 下拉刷新
		downCallback() {
			this.mescroll.resetUpScroll();
		},
		// 上拉加载
		upCallback(page) {
			this.$api.consoleApi
				.getHome({
					type: 'SPOT',
					exchangeName: 'HUOBI',
					page: page.num,
					isHide:!this.Console_value,
				})
				.then(res => {
					console.log(res);
					let list = res.data || [];
					this.mescroll.endSuccess(list.length);
					if (page.num == 1) this.pageData = []; //如果是第一页需手动制空列表
					this.pageData = this.pageData.concat(list); //追加新数据
					const cell_view = uni.createSelectorQuery().in(this);
					cell_view.select('#cell').boundingClientRect(data => {
						console.log(data)
						this.cell_top = data.top;
						this.cell_h = data.height;
					}).exec();
					const cell_view2 = uni.createSelectorQuery().in(this);
					cell_view2.select('.scroll_item1').boundingClientRect(data => {
						this.scroll_item1 = data.height;
					}).exec();
					const cell_view3 = uni.createSelectorQuery().in(this);
					cell_view3.select('.scroll_item2').boundingClientRect(data => {
						this.scroll_item2 = data.height;
					}).exec();
				}).catch(res =>{
					this.pageData = [];
					this.mescroll.endSuccess(0);
				})
		},
		Datatab(index) {
			// if (index == 0 || index == 2) {
			// 	this.$utils.toast('暂未开放');
			// }
		},
		cell_switch(index,type,info) {
			var that = this;
			if (this.cell_list_index != index) {
				this.cell_list_index = index;
				this.tacticsId = info.tacticsId;
				this.$nextTick(() =>{
					const query = uni.createSelectorQuery().in(this);
					query.select('.cell_list_active').boundingClientRect(data => {
						console.log(data)
						that.cell_list_show_h = that.cell_h - (data.top - that.cell_top);
						type == 5 ? that.cell_list_active_h = that.scroll_item2 : that.cell_list_active_h = that.scroll_item1;
						// that.scroll_active == false ? that.scroll_active_h = that.cell_list_active_h : ''
						var f = (that.cell_list_show_h) - (that.cell_list_active_h)
						if((-f)>0){/*元素下面被遮档时*/
							// if(that.scroll_active){
								// that.scrollTop = (-f) + (that.$refs.mescrollRef.mescroll.scrollTop || 0);
							// }else{
								that.scrollTop = (-f) + (that.$refs.mescrollRef.mescroll.scrollTop || 0);
								this.scroll_active = true;
							// }
							
						}else{
							// if(data.top < that.cell_top){/*元素上面被遮档时*/
							// 	that.scrollTop = (that.$refs.mescrollRef.mescroll.scrollTop || 0) - (that.cell_top-data.top);
							// }
						}
						console.log(data.top)
						console.log(that.cell_top)
						console.log(data.top > that.cell_top)
					}).exec();
				});
			} else {
				this.cell_list_index = null;
				this.tacticsId = '';
			}
			
		},
		OneShow(){
			this.Console_value = !this.Console_value;
			this.mescroll.resetUpScroll();
			this.tacticsId = '';
			this.cell_list_index = null;
		},
		toPage(link) {
			this.$api.consoleApi
				.getQuantifyRobotInfo()
				.then(res => {
					uni.navigateTo({
						url: link
					});
				})
				.catch(res => {
					console.log(res);
				});
		},
		StopNow(type, info, kg) {
			/*弹窗操作*/
			if (this.pageData.length) {
				if(type !=9){
					this.type = type;
					this.show = true;
					this.kg = kg;
					this.pageData_index = info;
					if (info) {
						this.id = info.tacticsId;
					}
				}else{
					uni.showLoading({
					    title: this.$t("loading.title"),
						mask:true,
					});
					this.$api.consoleApi
						.spotcheckClearProfit()
						.then(res => {
							this.checkClearProfit = res.data
							this.type = type;
							this.show = true;
							this.kg = kg;
							this.pageData_index = info;
							if (info) {
								this.id = info.tacticsId;
							}
							uni.hideLoading();
						})
						.catch(res =>{
							uni.hideLoading();
						})
				}
			}else{
				this.$refs.uToast.show({
					title: this.$t("zwsj"),
					type: 'warning',
				})
			}
		},
		OneStrategy() {
			/*一键策略操作*/
			if (this.type == 1) {
				if (Number(this.Amount)) {
					this.showPwd = true;
					console.log(this.Amount);
				} else {
					this.$utils.toast(this.$t("qsrbcjz"));
				}
			} else if (this.type == 3 && this.pageData_index.tacticsDetail.tacticsType == 1) {
				if (Number(this.doAmount)) {
					if(Number(this.doAmount) < 999){
						this.showPwd = true;
					}else{
						this.$utils.toast(this.$t("qsr999yndsz"));
					}
					
				} else {
					this.$utils.toast(this.$t("qsrxhcs"));
				}
			} else {
				this.showPwd = true;
			}
		},
		confirm(e) {
			if (this.type == 3) {
				this.Amount = this.doAmount;
			}
			if (this.type == 5) {
				if (this.pageData_index.tacticsDetail.executeStatus != 30) {
					uni.showLoading({
						title: this.$t("loading.title"),
						mask: true
					});
					this.$api.consoleApi
						.saveRobotStartOrStop({
							status: this.kg, //1关闭 2启动
							tacticsId: this.id,
							transferPassword: e
						})
						.then(res => {
							console.log(res);
							this.showPwd = false;
							this.show = false;
							this.Amount = '';
							// this.pageData_index =
							if (res.data) {
								// this.$utils.toast(res.data);
								this.show_modal = true;
								this.special_text = res.data;
							} else {
								this.$utils.toast(this.$t("czcg"));
							}
							this.mescroll.resetUpScroll();
							uni.hideLoading();
						})
						.catch(res => {
							console.log(res);
							this.showPwd = false;
							this.show = false;
							this.Amount = '';

							if (res != '密码错误！') {
								this.$utils.toast(res);
							}
							uni.hideLoading();
						});
				} else {
					this.apifun(e);
				}
			} else {
				this.apifun(e);
			}
		},
		apifun(e) {
			uni.showLoading({
				title: this.$t("loading.title"),
				mask: true
			});
			this.$api.consoleApi
				.saveOneKeyOperate({
					type: this.type,
					tacticsId: this.id,
					transferPassword: e,
					data: this.Amount
				})
				.then(res => {
					console.log(res);
					this.showPwd = false;
					this.show = false;
					this.Amount = '';
					// this.pageData_index = {}
					if (res.data) {
						// this.$utils.toast(res.data);
						this.show_modal = true;
						this.special_text = res.data;
					} else {
						this.$utils.toast(this.$t("czcg"));
					}
					this.mescroll.resetUpScroll();
					uni.hideLoading();
				})
				.catch(res => {
					console.log(res);
					this.showPwd = false;
					this.show = false;
					this.Amount = '';
					if (res != '密码错误！') {
						this.$utils.toast(res);
					}
					uni.hideLoading();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.Data_tab {
	display: flex;
	padding: 18rpx $nr-padd;
	.item {
		font-size: 32rpx;
		margin-right: 40rpx;
		color: $tom-text-sub-color2;
		position: relative;
	}
	.item1 {
		color: $text-color;
		font-weight: bold;
	}
	.item1::before {
		content: '';
		position: absolute;
		bottom: -12rpx;
		left: 0rpx;
		width: 100%;
		height: 4rpx;
		background-color: $text-color;
	}
}
.top_btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 20rpx 50rpx;
	.btn {
		font-size: 24rpx;
		color: $text-color;
		background-color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		margin-left: 20rpx;
		box-shadow: $tom-block-shadow;
	}
	.btn2 {
		color: $tom-text-sub-color;
	}
}
.cell {
	background-color: #fff;
	margin: 0px $nr-padd;
	border-radius: 20rpx;
	box-shadow: $tom-block-shadow;
	flex: 1;
	overflow: auto;
	display: flex;
	flex-direction: column;
	.cell_list {
		height: 140rpx;
		transition: 0.4s;
		overflow: hidden;
		.cell_item_top {
			height: 140rpx;
			border-bottom: 2rpx solid $page-bg;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0rpx $nr-padd;

			.left {
				width: 210rpx;
				display: flex;
				align-items: center;
				.text {
					font-size: 30rpx;
					margin-left: 10rpx;
					font-weight: bold;
					margin-top: -4rpx;
					.text_tips {
						display: none;
					}
				}
				.tips {
					background-color: $text-color;
					color: #fff;
					width: 100rpx;
					height: 40rpx;
					margin-left: 14rpx;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.text {
						font-size: 24rpx;
						margin: 0;
					}
				}
				.tips2 {
					background-color: $tom-text-red;
				}
				.tips3 {
					background-color: $tom-text-green;
				}
			}
			.right {
				color: $tom-text-color;
				font-size: 28rpx;
				font-weight: bold;
				text-align: center;
				.label {
					margin-bottom: 16rpx;
				}
				.text {
					color: $text-color;
				}
				.text2 {
					color: $tom-text-green;
				}
				.text3 {
					color: $tom-text-red;
				}
			}
			.right_active {
				font-weight: bold;
				font-size: 28rpx;
				display: none;
			}
		}
		.cell_item_list {
			border-bottom: 2rpx solid $page-bg;
			align-items: center;
			justify-content: space-between;
			color: $tom-text-color;
			padding: 20rpx 0rpx;
			display: none;
			.item {
				width: 100%;
				text-align: center;
				font-weight: bold;
				font-size: 28rpx;
				.label {
					margin-bottom: 20rpx;
					.text_tips {
						font-size: 24rpx;
						font-weight: 400;
					}
				}
				.text {
					color: $text-color;
					word-break: break-word;
					white-space: pre-line;
					font-weight: 400;
					font-size: 24rpx;
				}
				.text2 {
					color: $tom-text-green;
				}
				.text3 {
					color: $tom-text-red;
				}
				.text4 {
					color: $tom-text-sub-color2;
				}
			}
		}
		.cell_item_Operation {
			display: none;
			.cell_item_Operation_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: $tom-text-color;
				font-weight: bold;
				padding: 20rpx $nr-padd;
				.left {
					font-size: 28rpx;
				}
				.right {
					display: flex;
					align-items: center;
					.right_btn {
						width: 140rpx;
						height: 50rpx;
						background-color: $tom-text-red;
						border-radius: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						color: #fff;
						margin-left: 20rpx;
					}
				}
			}
			.cell_item_Operation_btn {
				display: flex;
				font-weight: bold;
				flex-wrap: wrap;
				.btn {
					width: 140rpx;
					height: 50rpx;
					background-color: $tom-text-red;
					border-radius: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #fff;
					margin-left: 20rpx;
					margin-bottom: 20rpx;
				}
				.btn2 {
					background-color: #33bb99;
				}
				.btn3 {
					background-color: #333333;
				}
				.btn4 {
					background-color: $text-color;
				}
			}
		}
	}
	.cell_list_active {
		height: 698rpx;
		.cell_item_top {
			padding: $nr-padd;
			border-bottom: none;
			.left {
				.u-icon {
					transform: rotate(90deg);
				}
				.text {
					.text_tips {
						display: inline;
					}
				}
				.tips {
					display: none;
				}
			}
			.right {
				display: none;
			}
			.right_active {
				display: inline;
			}
		}
		.cell_item_list {
			display: flex;
		}
		.cell_item_Operation {
			display: block;
		}
	}
	.cell_list_active2 {
		height: 628rpx;
	}
	.cell_Tre {
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		padding: 26rpx 0rpx;
		color: $tom-text-sub-color2;
		.text {
			font-size: 28rpx;
			margin-left: 10rpx;
			margin-top: -4rpx;
		}
	}
}
.cell_puls {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: $tom-text-sub-color2;
	background-color: #fff;
	height: 170rpx;
	border-radius: 20rpx;
	margin: 20rpx $nr-padd;
	box-shadow: $tom-block-shadow;
	.text {
		font-size: 32rpx;
		margin-left: 10rpx;
	}
}
.pop_nr {
	line-height: 0;
	.img {
		width: 630rpx;
		height: 430rpx;
	}
	.pop_nr_block {
		background-color: #fff;
		border-radius: 0rpx 0rpx 30rpx 30rpx;
		line-height: normal;
		text-align: center;
		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: $tom-text-color;
			text-align: center;
			padding: 50rpx 0rpx;
			max-width: 560rpx;
			margin: 0rpx auto;
		}
		.pop_nr_item {
			display: flex;
			align-items: center;
			padding: 0rpx 40rpx 40rpx 40rpx;
			color: $tom-text-color;
			.pop_nr_item_left {
				font-size: 28rpx;
			}
			.pop_nr_item_right {
				border: 2rpx solid $tom-text-sub-color3;
				border-radius: 8rpx;
				text-align: left;
				font-size: 24rpx;
				height: 54rpx;
				padding: 0rpx 14rpx;
				margin-left: 10rpx;
				font-weight: 400;
			}
			// .pop_nr_item_text {
			// 	font-size: 24rpx;
			// 	color: $tom-text-sub-color;
			// 	font-weight: 400;
			// 	margin-left: 10rpx;
			// }
		}
		.pop_nr_btn {
			padding: 0rpx 0px 40rpx 0px;
			display: flex;
			justify-content: space-around;
			.btn {
				display: flex;
				align-items: center;
				justify-content: space-around;
				font-size: 30rpx;
				font-weight: bold;
				background-color: $text-color;
				width: 160rpx;
				height: 60rpx;
				color: #fff;
				border-radius: 10rpx;
			}
			.btn2 {
				background-color: #fff;
				border: 1px solid $tom-text-sub-color3;
				color: $tom-text-sub-color;
			}
		}
	}
}
</style>
